<template>
    <up-popup :show="props.modelValue" :round="10">
        <view class="loginForm">
            <up-tabs :list="tabList" @change="changeTab" lineColor="#f8744d"></up-tabs>
            <view class="login-form-box">
                <up-form labelPosition="left" :model="loginForm" ref="regFormRef">
                    <up-form-item label="" prop="username" borderBottom>
                        <up-input v-model="loginForm.username"
                            placeholder="请输入手机号码" border="none" 
                        ></up-input> 
                    </up-form-item>
                    <up-form-item v-if="tabIndex==0" label="" prop="password" borderBottom>
                        <password-input v-model="loginForm.password"></password-input>
                    </up-form-item>
                    <up-form-item v-if="tabIndex==1" label="" prop="captchaVal" borderBottom>
                        <captcha-input v-model="loginForm.captchaValue" :phone="loginForm.username"
                                       @afterGetCaptcha="afterGetCaptcha" />
                    </up-form-item>
                </up-form>
                <view class="act-box">
                    <view class="btn" >
                        <up-button shape="circle" color="#f8744d" @click="handleLogin">登 录</up-button>
                    </view>
                    <view class="btn" >
                        <up-button shape="circle" @click="close">返 回</up-button>
                    </view>
                    
                </view>
            </view>
        </view>
	</up-popup>
</template>

<script lang="ts">
    export default {
        name:"LoginForm", 
        options: { styleIsolation: 'shared' },
    }
</script>

<script lang="ts" setup>
    import { ref,reactive } from 'vue';
    import CaptchaInput from '../captchaInput.vue';
    import PasswordInput from '../PasswordInput.vue';
    import { UserLoginReq } from '../../http/user';
    import { Md5Encode, MyAlert } from '../../utils/utils';
    import { useUserStore } from '../../store/userStore';

    const userStore=useUserStore()

    const props=defineProps({
        modelValue:Boolean
    })

    const emit=defineEmits(['update:modelValue'])

    const tabList=[
        {name:"密码登录"},
        {name:"验证码登录"},
    ]

    const loginForm=ref({
        username:"",
        password:"",
        captchaKey:"",
        captchaValue:""
    })

    const tabIndex=ref(0)

    const close=()=>{
        emit('update:modelValue',false)
    }
    
    const changeTab=(tabItem )=>{
        tabIndex.value=tabItem.index
    }

    const handleLogin=()=>{
        let postData={...loginForm.value,loginType:tabIndex.value}
        if(postData.loginType==0){
            postData.password=Md5Encode(postData.password)
        }
        UserLoginReq(postData).then(res=>{
            
            userStore.setToken(res.data.token)
            userStore.setUser(res.data.user)

            uni.redirectTo({
                url:"/pages/index"
            })
        }).catch((res)=>{
            MyAlert({title:"登录失败",content:res.message})
        })
        
    }

    const afterGetCaptcha=(res)=>{
        loginForm.value.captchaKey=res.key
        if(process.env.NODE_ENV==="development"){
            MyAlert({title:"验证码",content:"测试 验证码为:"+res.value})
        }
    }
</script>

<style lang="scss" scoped>
    .loginForm{
        margin: 0 auto;
        width: 600upx;
        margin-top: 20upx;
        .login-form-box{
            margin-top: 20upx;
			& ::v-deep{
                .u-line{
                    display: none;
                }
                .u-input__content{
                    border: 4upx solid #f3f3f3;
                    border-radius: 22px; 
                    padding: 0 10px; 
                    height: 74upx;
                }
                .u-input__content:hover{
                    border-color: $uni-color-primary;
                }
                .item__body__right__content__icon{
                    margin-left: 20upx;
                    width: 192upx;
                }
            }
        }
    }
    .form-box{
        margin: 0 auto;
        width: 600upx; 
        margin-top: 150upx;
        
        
    }

</style>